<!doctype html>
<html class="no-js" lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Data Table | Kiaalap - Kiaalap Admin Template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- favicon
		============================================ -->
    <link rel="shortcut icon" type="image/x-icon" href="/static/img/favicon.ico">
    <!-- Google Fonts
		============================================ -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet">
    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <!-- owl.carousel CSS
		============================================ -->
    <link rel="stylesheet" href="/static/css/owl.carousel.css">
    <link rel="stylesheet" href="/static/css/owl.theme.css">
    <link rel="stylesheet" href="/static/css/owl.transitions.css">
    <!-- animate CSS
		============================================ -->
    <link rel="stylesheet" href="/static/css/animate.css">
    <!-- normalize CSS
		============================================ -->
    <link rel="stylesheet" href="/static/css/normalize.css">
    <!-- meanmenu icon CSS
		============================================ -->
    <link rel="stylesheet" href="/static/css/meanmenu.min.css">
    <!-- main CSS
		============================================ -->
    <link rel="stylesheet" href="/static/css/main.css">
    <!-- educate icon CSS
		============================================ -->
    <link rel="stylesheet" href="/static/css/educate-custon-icon.css">
    <!-- morrisjs CSS
		============================================ -->
    <link rel="stylesheet" href="/static/css/morrisjs/morris.css">
    <!-- mCustomScrollbar CSS
		============================================ -->
    <link rel="stylesheet" href="/static/css/scrollbar/jquery.mCustomScrollbar.min.css">
    <!-- metisMenu CSS
		============================================ -->
    <link rel="stylesheet" href="/static/css/metisMenu/metisMenu.min.css">
    <link rel="stylesheet" href="/static/css/metisMenu/metisMenu-vertical.css">
    <!-- calendar CSS
		============================================ -->
    <link rel="stylesheet" href="/static/css/calendar/fullcalendar.min.css">
    <link rel="stylesheet" href="/static/css/calendar/fullcalendar.print.min.css">
    <!-- x-editor CSS
		============================================ -->
    <link rel="stylesheet" href="/static/css/editor/select2.css">
    <link rel="stylesheet" href="/static/css/editor/datetimepicker.css">
    <link rel="stylesheet" href="/static/css/editor/bootstrap-editable.css">
    <link rel="stylesheet" href="/static/css/editor/x-editor-style.css">
    <!-- normalize CSS
		============================================ -->
    <link rel="stylesheet" href="/static/css/data-table/bootstrap-table.css">
    <link rel="stylesheet" href="/static/css/data-table/bootstrap-editable.css">
    <!-- style CSS
		============================================ -->
    <link rel="stylesheet" href="/static/style.css">
    <!-- responsive CSS
		============================================ -->
    <link rel="stylesheet" href="/static/css/responsive.css">
    <!-- modernizr JS
		============================================ -->
    <!--    <link rel="stylesheet" type="text/css" href="/static/css/user/UserRole.css">-->
    <script src="/static/js/vendor/modernizr-2.8.3.min.js"></script>
    <!--    <script type="text/javascript" src="/static/js/user/UserRole.js"></script>-->
    <style>
        /*模态框*/
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 根据浏览器定位 */
            z-index: 1; /* 放在顶部 */
            left: 0;
            top: 0;
            width: 100%; /* 全宽 */
            height: 100%; /* 全高 */
            overflow: auto; /* 允许滚动 */
            background-color: rgba(0,0,0,0.4); /* 背景色 */
        }
        /*模态框内容*/
        .modal-content {
            display: flex; /*采用flexbox布局*/
            flex-direction: column; /*垂直排列*/
            position: relative;
            background-color: #fefefe;
            margin: 5% auto; /*距顶部15% 水平居中*/
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            height: 700px;
            animation: topDown 0.4s; /*自定义动画，从模态框内容上到下出现*/
        }
        @keyframes topDown {
            from {top: -300px; opacity: 0}
            to {top: 0; opacity: 1}
        }
        /*模态框头部*/
        .modal-header {
            display: flex; /*采用flexbox布局*/
            flex-direction: row; /*水平布局*/
            align-items: center; /*内容垂直居中*/
            justify-content: space-between;
        }
        /*关闭X 样式*/
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        .aaaa{
            margin-top: 30%;
        }
    </style>
</head>

<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="sparkline13-list">

                <div class="sparkline13-graph">
                    <div class="datatable-dashv1-list custom-datatable-overright">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-xs-12 col-md-8"><strong>数据筛选</strong></div>
                                <div class="col-xs-6 col-md-4"><strong>高级搜索</strong></div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-xs-12 col-md-8">
                                    <form class="form-inline">
                                        <div class="form-group">
                                            <label for="exampleInputName2">输入查询：</label>
                                            <input type="text" class="form-control" id="exampleInputName2" placeholder="姓名/账号/手机/邮箱">
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputEmail2">角色：</label>
                                            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="全部">
                                        </div>

                                    </form>
                                </div>
                                <div class="col-xs-6 col-md-4">
                                    <button type="submit" class="btn btn-success">搜索</button>
                                    <a type="button" th:href="@{/user/addUser}" class="btn btn-warning" style="margin-left: 20px">添加</a>
                                </div>
                            </div>
                        </div>
                        <table id="table" data-toggle="table"    data-toolbar="#toolbar">
                            <thead>
                            <tr>
                                <th data-field="state" data-checkbox="true"></th>
                                <th data-field="id">ID</th>
                                <th data-field="name" data-editable="true">姓名</th>
                                <th data-field="email" data-editable="true">性别</th>
                                <th data-field="phone" data-editable="true">工号</th>
                                <th data-field="complete">角色</th>
                                <th data-field="task" data-editable="true">登录账号</th>
                                <th data-field="date" data-editable="true">手机</th>
                                <th data-field="price" data-editable="true">启用</th>
                                <th data-field="action">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td></td>
                                <td>1</td>
                                <td>Web Development</td>
                                <td>admin@uttara.com</td>
                                <td>+8801962067309</td>
                                <td class="datatable-ct"><span class="pie">1/6</span>
                                </td>
                                <td>10%</td>
                                <td>Jul 14, 2017</td>
                                <td>$5455</td>
                                <td class="datatable-ct">
                                    <!-- <i class="fa fa-check"></i>-->
                                    <div align="center">
                                        <a type="button" href="/user/updateUser" style="margin-left: 20px" class="btn btn-success">编辑</a>
                                        <a type="button" class="btn btn-primary" id="triggerBtn">权限</a>
<!--                                        <button id="triggerBtn" onclick="aaa()">模态框</button>-->
                                        <a type="button" class="btn btn-danger">删除</a>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<div id="myModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>权限设置</h2>
            <span id="closeBtn" class="close">×</span>
        </div>
        <div class="modal-body">
            <p>权限设置</p>
            <p>权限设置！</p>
        </div>
        <div class="aaaa">
            <a  type="button" class="btn btn-success">提交</a>
            <a  type="button" class="btn btn-danger">重置</a>
        </div>
    </div>
</div>

<script type="application/javascript">
    // (function() {
    window.onload=function(){
    // function  aaa() {
        /*建立模态框对象*/
        var modalBox = {};
        /*获取模态框*/
        modalBox.modal = document.getElementById("myModal");
        /*获得trigger按钮*/
        modalBox.triggerBtn = document.getElementById("triggerBtn");
        /*获得关闭按钮*/
        modalBox.closeBtn = document.getElementById("closeBtn");
        /*模态框显示*/
        modalBox.show = function() {
            console.log(this.modal);
            this.modal.style.display = "block";
        }
        /*模态框关闭*/
        modalBox.close = function() {
            this.modal.style.display = "none";
        }
        /*当用户点击模态框内容之外的区域，模态框也会关闭*/
        modalBox.outsideClick = function() {
            var modal = this.modal;
            window.onclick = function(event) {
                if(event.target == modal) {
                    modal.style.display = "none";
                }
            }
        }
        /*模态框初始化*/
        modalBox.init = function() {
            var that = this;
            this.triggerBtn.onclick = function() {
                that.show();
            }
            this.closeBtn.onclick = function() {
                that.close();
            }
            this.outsideClick();
        }
        modalBox.init();
    };

</script>
<!-- jquery
    ============================================ -->
<script src="/static/js/vendor/jquery-1.12.4.min.js"></script>
<!-- bootstrap JS
    ============================================ -->
<script src="/static/js/bootstrap.min.js"></script>
<!-- wow JS
    ============================================ -->
<script src="/static/js/wow.min.js"></script>
<!-- price-slider JS
    ============================================ -->
<script src="/static/js/jquery-price-slider.js"></script>
<!-- meanmenu JS
    ============================================ -->
<script src="/static/js/jquery.meanmenu.js"></script>
<!-- owl.carousel JS
    ============================================ -->
<script src="/static/js/owl.carousel.min.js"></script>
<!-- sticky JS
    ============================================ -->
<script src="/static/js/jquery.sticky.js"></script>
<!-- scrollUp JS
    ============================================ -->
<script src="/static/js/jquery.scrollUp.min.js"></script>
<!-- mCustomScrollbar JS
    ============================================ -->
<script src="/static/js/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="/static/js/scrollbar/mCustomScrollbar-active.js"></script>
<!-- metisMenu JS
    ============================================ -->
<script src="/static/js/metisMenu/metisMenu.min.js"></script>
<script src="/static/js/metisMenu/metisMenu-active.js"></script>
<!-- data table JS
    ============================================ -->
<script src="/static/js/data-table/bootstrap-table.js"></script>
<script src="/static/js/data-table/tableExport.js"></script>
<script src="/static/js/data-table/data-table-active.js"></script>
<script src="/static/js/data-table/bootstrap-table-editable.js"></script>
<script src="/static/js/data-table/bootstrap-editable.js"></script>
<script src="/static/js/data-table/bootstrap-table-resizable.js"></script>
<script src="/static/js/data-table/colResizable-1.5.source.js"></script>
<script src="/static/js/data-table/bootstrap-table-export.js"></script>
<!--  editable JS
    ============================================ -->
<script src="/static/js/editable/jquery.mockjax.js"></script>
<script src="/static/js/editable/mock-active.js"></script>
<script src="/static/js/editable/select2.js"></script>
<script src="/static/js/editable/moment.min.js"></script>
<script src="/static/js/editable/bootstrap-datetimepicker.js"></script>
<script src="/static/js/editable/bootstrap-editable.js"></script>
<script src="/static/js/editable/xediable-active.js"></script>
<!-- Chart JS
    ============================================ -->
<script src="/static/js/chart/jquery.peity.min.js"></script>
<script src="/static/js/peity/peity-active.js"></script>
<!-- tab JS
    ============================================ -->
<script src="/static/js/tab.js"></script>
<!-- plugins JS
    ============================================ -->
<script src="/static/js/plugins.js"></script>
<!-- main JS
    ============================================ -->
<script src="/static/js/main.js"></script>
<!-- tawk chat JS
    ============================================ -->
<script src="/static/js/tawk-chat.js"></script>
</body>

</html>